<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Show Material Request</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 20px;
        }

        h1 {
            text-align: center;
            color: #333;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }

        th, td {
            border: 1px solid #ccc;
            padding: 10px;
            text-align: left;
        }

        th {
            background-color: #f0f0f0;
        }

        .section {
            margin-bottom: 20px;
            background-color: #fff;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
        }
        .button {
            display: inline-block;
            padding: 10px 20px;
            background-color: #007BFF;
            color: white;
            text-decoration: none;
            border-radius: 5px;
            border: none;
            cursor: pointer;
            margin-right: 10px;
        }
        .button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <h1>Material Request Details</h1>
    {% if material_request == none %}
        <p>Material Request not found.</p>
    {% else %}
        <div class="section">
            <h2>Request Information</h2>
            <table>
                <tr>
                    <th>Request ID</th>
                    <td>{{ material_request.request_id }}</td>
                </tr>
                <tr>
                    <th>User</th>
                    <td>{{ material_request.user }}</td>
                </tr>
                <tr>
                    <th>Total Price</th>
                    <td>{{ material_request.total_price }}</td>
                </tr>
                <tr>
                    <th>Datetime</th>
                    <td>{{ material_request.datetime }}</td>
                </tr>
            </table>
        </div>
        <div class="section">
            <h2>Addresses and Items</h2>
            {% for address in material_request.addresses: %}
                <h3>{{ address.address }}</h3>
                <p>Total Price: {{ address.total_price }}</p>
                <table>
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Count</th>
                            <th>Spec</th>
                            <th>Unit</th>
                            <th>Price per Unit</th>
                            <th>Total Price</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for item in address['items']  %}
                        <tr>
                            <td>{{ item.name }}</td>
                            <td>{{ item.count }}</td>
                            <td>{{ item.spec }}</td>
                            <td>{{ item.unit }}</td>
                            <td>{{ item.price_per_unit }}</td>
                            <td>{{ item.total_price }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
        {% endfor %}
    </div>
    <a href="/database" class="button">Back to Index</a>
    <a href="/export_excel/{{ material_request.request_id }}" class="button">导出</a>
    {% endif %}
</body>
</html>
